import React, { Component } from "react";
import { nanoid } from "nanoid";
import "./App.css";
import Header from "./component/Header";
import List from "./component/List";
import Footer from "./component/Footer";
export default class App extends Component {
  state = {
    todoList: [
      {
        id: "1",
        name: "吃饭",
        done: true,
      },
      {
        id: "2",
        name: "睡觉",
        done: false,
      },
      {
        id: "3",
        name: "打豆豆",
        done: true,
      },
    ],
  };
  // 添加todolist
  addTodo = (value) => {
    let { todoList } = this.state;
    todoList.unshift({
      id: nanoid(),
      name: value,
      done: false,
    });
    this.setState({
      todoList,
    });
  };
  // 选择单项
  handleCheck = (id, checked) => {
    let { todoList } = this.state;
    todoList.forEach((item) => {
      if (id === item.id) {
        item.done = checked;
      }
    });
    this.setState({
      todoList,
    });
  };
  // 全选
  allChecked = (check) => {
    let { todoList } = this.state;
    const newArr = todoList.map((item) => {
      return { ...item, done: check };
    });
    this.setState({
      todoList: newArr,
    });
  };

  // 删除某一项
  deleteTodo = (id) => {
    let { todoList } = this.state;
    let newTodos = todoList.filter((item) => item.id !== id);
    this.setState({
      todoList: newTodos,
    });
  };

  // 清除选中
  deleteCheck = () => {
    let { todoList } = this.state;
    const newArr= todoList.filter(item=>!item.done)
    this.setState({
      todoList:newArr
    })
  };
  render() {
    const { todoList } = this.state;
    return (
      <div className="app">
        <Header add={this.addTodo}></Header>
        <List
          data={todoList}
          handleCheck={this.handleCheck}
          deleteTodo={this.deleteTodo}
        ></List>
        <Footer
          all={todoList}
          allChecked={this.allChecked}
          deleteCheck={this.deleteCheck}
        ></Footer>
      </div>
    );
  }
}
